<!doctype html>
<html lang="en" data-theme="dark">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="description" content="<%- description %>" />

    <!-- PWA iOS Safari 配置 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta name="apple-mobile-web-app-title" content="<%- title %>" />

    <title><%- title %></title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap"
      rel="stylesheet"
    />
    <style>
      html {
        font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
      }
    </style>
    <script id="config">
      window.__CONFIG__ = {}
    </script>
    <script id="manifest"></script>
  </head>
  <body>
    <div id="root">
      <!-- Splash Screen - 现代简洁设计 -->
      <div
        id="splash-screen"
        style="
          position: fixed;
          top: 0;
          left: 0;
          width: 100vw;
          height: 100vh;
          background: #0a0a0a;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          z-index: 9999;
          font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
          overflow: hidden;
        "
      >
        <!-- 主要内容 -->
        <div
          style="
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2rem;
            text-align: center;
          "
        >
          <!-- Logo -->
          <div
            style="
              width: 3.5rem;
              height: 3.5rem;
              background: rgba(255, 255, 255, 0.85);
              border-radius: 1.25rem;
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.1),
                0 4px 16px rgba(0, 0, 0, 0.4);
              animation: logoFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
              backdrop-filter: blur(10px);
            "
          >
            <!-- 相机图标 -->
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              stroke="#0a0a0a"
              stroke-width="1.8"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path
                d="M3 9a2 2 0 0 1 2-2h.93a2 2 0 0 0 1.664-.89l.812-1.22A2 2 0 0 1 10.07 4h3.86a2 2 0 0 1 1.664.89l.812 1.22A2 2 0 0 0 18.07 7H19a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9z"
              />
              <circle cx="12" cy="13" r="3" />
            </svg>
          </div>

          <!-- 应用标题 -->
          <div style="display: flex; flex-direction: column; gap: 0.75rem">
            <h1
              style="
                font-size: 1.75rem;
                font-weight: 600;
                letter-spacing: -0.025em;
                color: rgba(255, 255, 255, 0.85);
                margin: 0;
                animation: titleFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s
                  both;
              "
            >
              <%- title %>
            </h1>
            <p
              style="
                color: rgba(255, 255, 255, 0.5);
                font-size: 0.875rem;
                margin: 0;
                font-weight: 400;
                letter-spacing: 0.01em;
                animation: subtitleFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s
                  both;
              "
            >
              <%- description %>
            </p>
          </div>

          <!-- 加载动画 -->
          <div
            style="
              margin-top: 1rem;
              animation: loaderFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both;
            "
          >
            <!-- 点状加载器 -->
            <div style="display: flex; gap: 0.5rem; align-items: center">
              <div
                style="
                  width: 0.375rem;
                  height: 0.375rem;
                  background: rgba(255, 255, 255, 0.6);
                  border-radius: 50%;
                  animation: dotPulse 1.4s ease-in-out infinite;
                "
              ></div>
              <div
                style="
                  width: 0.375rem;
                  height: 0.375rem;
                  background: rgba(255, 255, 255, 0.6);
                  border-radius: 50%;
                  animation: dotPulse 1.4s ease-in-out infinite 0.2s;
                "
              ></div>
              <div
                style="
                  width: 0.375rem;
                  height: 0.375rem;
                  background: rgba(255, 255, 255, 0.6);
                  border-radius: 50%;
                  animation: dotPulse 1.4s ease-in-out infinite 0.4s;
                "
              ></div>
            </div>
          </div>
        </div>

        <!-- CSS 动画 -->
        <style>
          @keyframes logoFade {
            0% {
              opacity: 0;
              transform: translateY(-10px) scale(0.9);
            }
            100% {
              opacity: 1;
              transform: translateY(0) scale(1);
            }
          }

          @keyframes titleFade {
            0% {
              opacity: 0;
              transform: translateY(10px);
            }
            100% {
              opacity: 1;
              transform: translateY(0);
            }
          }

          @keyframes subtitleFade {
            0% {
              opacity: 0;
              transform: translateY(8px);
            }
            100% {
              opacity: 1;
              transform: translateY(0);
            }
          }

          @keyframes loaderFade {
            0% {
              opacity: 0;
              transform: translateY(6px);
            }
            100% {
              opacity: 1;
              transform: translateY(0);
            }
          }

          @keyframes dotPulse {
            0%,
            100% {
              opacity: 0.3;
              transform: scale(0.8);
            }
            50% {
              opacity: 1;
              transform: scale(1);
            }
          }

          /* 响应式设计 */
          @media (max-width: 640px) {
            #splash-screen h1 {
              font-size: 1.5rem;
            }
            #splash-screen p {
              font-size: 0.8rem;
            }
          }

          @media (max-width: 480px) {
            #splash-screen h1 {
              font-size: 1.375rem;
            }
            #splash-screen [style*='gap: 2rem'] {
              gap: 1.5rem !important;
            }
          }
        </style>
      </div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
